<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>onkeypress</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bord{
            border: 1px dashed #ee2602;
            width: 90%;
            margin: 20px auto;
        }
        .title{
            font-size: 20px;
            font-weight: bold;
            margin: 20px;
        }
        .introduce{
            font-size: 16px;
            margin: 0 0 20px 50px;
        }
        .red{
            color: red;
        }
    </style>
    <script>
        function displayResult()
        {
            var x;
            if(window.event) // IE8 及更早IE版本
            {
                x=event.keyCode;
            }
            else if(event.which) // IE9/Firefox/Chrome/Opera/Safari
            {
                x=event.which;
            }
            keychar=String.fromCharCode(x);
            alert("按键 " + keychar + " 被按下");
        }
    </script>
</head>
<body>
<div class="bord">
    <div class="title">onkeypress</div>
    <div class="introduce">
        onkeypress 属性在按下按键时触发。
    </div>
</div>
<div class="bord">
    <div class="title">演示效果</div>
    <p>输入域按下按键时触发， 该功能提醒按下的键</p>
    <input type="text" onkeypress="displayResult()">
</div>
<div class="bord">
    <div class="title">代码</div>
    <div class="introduce">
        <pre>
                &lt;script&gt;
         function myFunction(){
            var x;
            if(window.event) // IE8 及更早IE版本
            {
                x=event.keyCode;
            }
            else if(event.which) // IE9/Firefox/Chrome/Opera/Safari
            {
                x=event.which;
            }
            keychar=String.fromCharCode(x);
            alert("按键 " + keychar + " 被按下");
        }
                &lt;/script&gt;

            输入框内按下一个按键，该功能提醒按下的键: &lt;input type="text" onkeypress="displayResult()"&gt;
        </pre>
    </div>
</div>
</body>
</html>